<template>
  <view class="login-mian">
    <LoginLogo />
    <view class="btn-warp">
      <view class="login-btn-1 btn" @click="goPhoneLogin">手机登录</view>
      <view class="login-btn-2 btn" @click="gohome">立即体验</view>
      <view class="agree-box">
        <checkbox-group @change="handleAgree">
          <checkbox color="#db857c" style="transform:scale(0.7)" :checked="isagree" value="哈哈哈">
     
          </checkbox>
        </checkbox-group>

        <view class="txet-box">
                同意协议
            <text class="terms">《服务条款》 《隐私条款》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import LoginLogo from "./rely/LoginLogo";
export default {
  components: {
    LoginLogo,
  },
  methods: {
    gohome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    goPhoneLogin() {
      if (!this.isagree) {
        uni.showToast({
          title: "请先同意下方协议!",
          icon: "none",
        });
        return;
      }

      uni.navigateTo({
        url: "/pages/login/phoneLogin",
      });
    },
    handleAgree(e) {
      // console.log('---');
      // console.log();
      this.isagree = e.detail.value.length !== 0;
      // console.log(this.isagree);
    },
  },
  data() {
    return {
      isagree: false,
    };
  },
};
</script>

<style lang="scss">
.login-mian {
  background-color: #c93e2d;
  height: 100vh;
  .btn-warp {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 10%;
    .btn {
      width: 80%;
      margin: 10px auto;
      border: 2rpx solid #fff8fc;
      height: 72rpx;
      border-radius: 36rpx;
      color: #fff8f5;
      font-size: 32rpx;
    }
    .login-btn-1 {
      background: #fffeff;
      color: #ca3d2f;
    }
    .agree-box {
      width: 80%;
      margin: auto;
      font-size: 20rpx;
      display: flex;
      align-items: center;
      color: #db857c;
      .terms {
        color: #f0d1ce;
      }
    }
  }
}
</style>